iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
Modern Web

ASP.NET Core的終極奧義:從零到無敵系列 第 18

Day_18 使用Razor Pages建立動態頁面

  • 分享至 

  • xImage
  •  

第四章:前端整合篇

Razor Pages是ASP.NET Core中的一個強大功能,它提供了簡單且有效的方式來構建動態網頁。透過Razor Pages,我們可以快速創建高效且可維護的頁面結構。本篇將介紹如何使用Razor Pages來建立動態網頁,並探討其優勢。


1. Razor Pages的概念

Razor Pages是ASP.NET Core 2.0開始引入的一種頁面驅動的編程模型,專為簡化小型應用和專案的開發過程設計。與傳統的MVC架構相比,Razor Pages將頁面邏輯和UI結合在一起,使開發者能夠更快速地編寫代碼和處理表單提交等動作。

Razor Pages的每個頁面都有一個.cshtml文件(包含HTML和C#的Razor語法)和一個與之相關的PageModel類(處理頁面邏輯)。


2. 建立一個新的Razor Page

要在ASP.NET Core專案中新增Razor Page,我們首先需要右鍵點擊專案中的Pages資料夾,選擇新增一個「Razor Page」項目。

當我們新增一個Razor Page時,會自動生成以下兩個文件:

  1. .cshtml 文件:包含HTML和Razor語法
  2. .cshtml.cs 文件:PageModel類,負責頁面的後端邏輯

一個簡單的Razor Page範例如下:

@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Welcome to Razor Pages</title>
</head>
<body>
    <h1>@Model.Message</h1>
</body>
</html>

這裡的 @page 指令標誌著這是一個Razor Page,而 @Model.Message 用於在頁面上顯示從PageModel中傳遞的數據。

3. Razor Pages的PageModel

每個Razor Page都會有對應的PageModel類,它負責處理頁面的邏輯。這個PageModel類包含在.cshtml.cs文件中,負責管理頁面的數據和行為。

範例PageModel類:

public class IndexModel : PageModel
{
    public string Message { get; set; }

    public void OnGet()
    {
        Message = "Hello, welcome to Razor Pages!";
    }
}

在這個範例中,OnGet方法會在頁面被請求時執行,並將一個訊息賦值給 Message 屬性。這個訊息接著會在對應的 .cshtml 頁面上被渲染。

4. 使用表單和處理提交

Razor Pages使得處理表單提交變得非常簡單。當用戶提交表單時,PageModel中的OnPost方法會自動被觸發,這樣我們就可以輕鬆地處理來自用戶的輸入。

範例表單:

@page
@model ContactModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Contact Us</title>
</head>
<body>
    <form method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="Name" />
        <button type="submit">Submit</button>
    </form>
</body>
</html>

對應的PageModel處理邏輯:

public class ContactModel : PageModel
{
    [BindProperty]
    public string Name { get; set; }

    public void OnPost()
    {
        // 在這裡處理表單提交邏輯
        if (!string.IsNullOrEmpty(Name))
        {
            // 處理輸入的數據
        }
    }
}

在這個範例中,當用戶提交表單時,OnPost方法會被觸發,並且表單中的Name欄位會自動綁定到PageModel中的Name屬性。

5. Razor Pages的優勢

Razor Pages有以下幾個顯著的優勢:

簡化代碼結構:與傳統的MVC模式相比,Razor Pages將頁面邏輯和顯示緊密結合在一起,這對於小型應用來說可以減少代碼的複雜性。
便於維護:每個頁面都自包含其對應的PageModel,這樣可以讓開發者更清楚地掌控頁面的邏輯與視圖。
高效的表單處理:Razor Pages簡化了表單提交與數據處理的流程,特別適合於簡單的表單操作,如資料輸入或提交。
更快的開發速度:由於其直觀的結構和設計,Razor Pages適合於快速開發,減少了多餘的配置和代碼分離。
6. 小結

Razor Pages為ASP.NET Core開發提供了一個簡單且功能強大的解決方案,特別是在構建動態網頁應用時,能夠顯著提升開發效率。無論是處理表單還是進行頁面邏輯處理,Razor Pages都提供了靈活且易用的方式來應對各種需求。


上一篇
Day_17 實作JWT認證系統
下一篇
Day_19 使用Blazor進行前端開發
系列文
ASP.NET Core的終極奧義:從零到無敵30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言